import React, { Component } from 'react'
import { connect } from 'react-redux'// 高阶组件，原则上connect()称之为高阶组件

// 展示组件 --- UI组件
class App extends Component {
    componentDidMount () {
        console.log(this.props, '2')
        this.props.getBannerList()
        this.props.getProList()
        console.log(this.props.getProList())
    }
    render() {
        const { proList } = this.props
        return (
            <div>
                {
                    proList && proList.map(item => {
                        return (
                            <h5 key={ item.proid }>
                                { item.proname }
                            </h5>
                        )
                    })
                }
            </div>
        )
    }
}

export default connect(
    // 负责输入逻辑，即将state映射到 UI 组件的参数（props）
    (state) => {
        return {
          bannerList: state.getIn(['home', 'bannerList']),
          proList: state.getIn(['home', 'proList']),
          count: state.getIn(['app', 'count'])
        }
      },
      // 负责输出逻辑，即将用户对 UI 组件的操作映射成 Action
    (dispatch) => {
        return {
            getBannerList () {
                dispatch({ type: 'REQUEST_BANNER_LIST'})
            },
            getProList () {
                dispatch ({ type: 'REQUEST_PRO_LIST', payload: 2})
            }
        }
    }
)(App)